<template>
	<view class="m-loading">
		<!-- 暂无数据 -->
		<view class="empty" :style="[style]" v-if="isShowNo && !loading && list.length <= 0">
			<m-icon :size="size" :type="icon"></m-icon>
			<text class="hint">{{ title }}</text>
		</view>
		<!-- loading -->
		<template v-else>
			<uni-load-more :status="pageIndex >= pageCount ? 'noMore' : loading ? 'loading' : 'more'" :content-text="contentText" />
		</template>
	</view>
</template>

<script>
export default {
	name: 'm-loading',
	data() {
		return {
			contentText: {
				contentdown: '上拉查看更多', // more
				contentrefresh: '加载中', // loading
				contentnomore: '没有更多了' // noMore
			}
		};
	},
	props: {
		pageIndex: {
			default: 0,
			type: [Number, String]
		},
		pageCount: {
			default: 0,
			type: [Number, String]
		},
		list: {
			type: Array,
			default: () => []
		},
		//是否是加载中
		loading: {
			type: Boolean,
			default: false
		},

		gap: {
			default: '0',
			type: String
		},
		spa: {
			default: '20 0',
			type: String
		},
		title: {
			type: String,
			default: '暂无数据'
		},
		size: {
			type: [String, Array],
			default: () => [310, 310]
		},
		icon: {
			type: String,
			default: 'noData'
		},
		isShowNo: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		style() {
			const gap = this.gap.split(' ').filter((x) => x);
			const spa = this.spa.split(' ').filter((x) => x);
			return {
				padding: gap.map((n) => `${n}rpx`).join(' '),
				margin: spa.map((n) => `${n}rpx`).join(' ')
			};
		}
	}
};
</script>

<style lang="scss">
.m-loading {
	// margin-top: 50rpx;
	min-height: 80rpx;
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: 100rpx;
	justify-content: center;

	.hint {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
	}
}
</style>
